<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="layui-form" v-else-if="item.type==3">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">视频区</li>
                <li>文字区</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>视频</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectVideoTu1'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadVideoTu1'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video.width">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">居中</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" :name="'zzz'+index" lay-skin="switch"
                                        :lay-filter="'video1Filter'+index" lay-text="开启|关闭"
                                        :checked="item.video.margin=='0 auto'">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.marginTop">
                                </div>
                            </div>
                            <!-- 外边距-左 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-左</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.marginLeft">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>按钮</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectBtnTu1'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadBtnTu1'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video.button.width">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.button.marginTop">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video.button.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                </div>
                <div class="layui-tab-item">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>文字</legend>
                        <div class="layui-field-box caozuo-w">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文字</label>
                                <div class="layui-input-block">
                                    <div :id="'sp-zifxk'+index"></div>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.characters.width">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">居中</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" :name="'zzz'+index" lay-skin="switch"
                                        :lay-filter="'wenziFilter'+index" lay-text="开启|关闭"
                                        :checked="item.characters.margin=='0 auto'">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.characters.marginTop">
                                </div>
                            </div>
                            <!-- 外边距-左 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-左</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.characters.marginLeft">
                                </div>
                            </div>

                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>按钮</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectWZBtnTu'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'selectWZBtnTu'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.characters.button.width">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.characters.button.marginTop">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.characters.button.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>

                </div>
            </div>
        </div>

    </div>
    <div class="layui-form" v-else-if="item.type==4">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">文字区</li>
                <li>视频区</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item  layui-show">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>文字</legend>
                        <div class="layui-field-box caozuo-w">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文字</label>
                                <div class="layui-input-block">
                                    <div :id="'sp-zifxk'+index"></div>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.characters.width">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">居中</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" :name="'zzz'+index" lay-skin="switch"
                                        :lay-filter="'wenziFilter'+index" lay-text="开启|关闭"
                                        :checked="item.characters.margin=='0 auto'">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.characters.marginTop">
                                </div>
                            </div>
                            <!-- 外边距-左 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-左</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.characters.marginLeft">
                                </div>
                            </div>

                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>按钮</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectWZBtnTu'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'selectWZBtnTu'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.characters.button.width">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.characters.button.marginTop">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.characters.button.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>

                </div>
                <div class="layui-tab-item">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>视频</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectVideoTu1'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadVideoTu1'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video.width">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">居中</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" :name="'zzz'+index" lay-skin="switch"
                                        :lay-filter="'video1Filter'+index" lay-text="开启|关闭"
                                        :checked="item.video.margin=='0 auto'">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.marginTop">
                                </div>
                            </div>
                            <!-- 外边距-左 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-左</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.marginLeft">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>按钮</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectBtnTu1'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadBtnTu1'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video.button.width">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.button.marginTop">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video.button.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-form" v-else-if="item.type==5">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">视频1区</li>
                <li>视频2区</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>视频</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectVideoTu1'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadVideoTu1'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video.width">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">居中</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" :name="'zzz'+index" lay-skin="switch"
                                        :lay-filter="'video1Filter'+index" lay-text="开启|关闭"
                                        :checked="item.video.margin=='0 auto'">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.marginTop">
                                </div>
                            </div>
                            <!-- 外边距-左 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-左</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.marginLeft">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>按钮</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectBtnTu1'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadBtnTu1'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video.button.width">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video.button.marginTop">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video.button.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                </div>
                <div class="layui-tab-item">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>视频</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectVideoTu2'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadVideoTu2'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video2.width">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">居中</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" :name="'zzz'+index" lay-skin="switch"
                                        :lay-filter="'video2Filter'+index" lay-text="开启|关闭"
                                        :checked="item.video2.margin=='0 auto'">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video2.marginTop">
                                </div>
                            </div>
                            <!-- 外边距-左 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-左</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video2.marginLeft">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video2.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>按钮</legend>
                        <div class="layui-field-box caozuo-w">
                            <!-- 视频图片 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">上传图片</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" :id="'selectBtnTu2'+index"><i
                                            class="layui-icon">&#xe60d;</i>选择图片</button>
                                    <button type="button" class="layui-btn" :id="'uploadBtnTu2'+index">
                                        <i class="layui-icon">&#xe62f;</i>
                                        上传图片
                                    </button>
                                </div>
                            </div>
                            <!-- 宽 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">宽</label>
                                <div class="layui-input-inline">
                                    <input type="number" min="0" max="180" autocomplete="off" class="layui-input"
                                        v-model="item.video2.button.width">
                                </div>
                            </div>
                            <!-- 外边距-上 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">外边距-上</label>
                                <div class="layui-input-inline">
                                    <input type="number" autocomplete="off" class="layui-input"
                                        v-model="item.video2.button.marginTop">
                                </div>
                            </div>
                            <!-- 链接 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <textarea type="text" min="0" max="360" autocomplete="off"
                                        placeholder="如：https://www.baidu.com" class="layui-textarea"
                                        v-model="item.video2.button.href"></textarea>
                                </div>
                            </div>

                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</body>

</html>